<template>
  <div>
    <!-- canvas -->
    <div class="wrap" :style="'height:'+cavWidth+'px'">
      <canvas class="circle" :style="'width:'+cavWidth+'px;height:'+cavWidth+'px'" canvas-id="bgCav"></canvas>
      <canvas class="circle" :style="'width:'+cavWidth+'px;height:'+cavWidth+'px'" canvas-id="frontCav"></canvas>
    </div>
  </div>
</template>

<script>
// canvas关键坐标、参数
var startX = 80, // 画笔开始位置x、y坐标
startY = 80,
radius = 60,      // 圆环半径
textX = 55,       // 中间文字画笔开始位置x、y
textY = 88;
// 异步返回的结果
var result = {
  level: '良好',
  ratio: '60%'
};
// 颜色、等级
var levelArr = ['优良', '良好', '较差'],
colorArr = ['#0c0', '#cc0', '#c40'];

export default {
  data () {
    return {
      cavWidth: null,
      bgCav: null, // 背景画布
      frontCav: null // 前置画布
    }
  },
  onLoad() {
    // 获取屏幕信息后绘画画布
    this.getSysInfo(this.drawCanvas)
  },
  methods: {
    // 绘制画布
    drawCanvas() {
      // 绘制背景画布
      this.drawBgCav()
      // 绘制前置画布
      this.drawFrontCav(result)
    },
    // 背景画布
    drawBgCav() {
      if(this.bgCav) {
        return
      }
      // 底部canvas
      var bgCav = this.bgCav = wx.createCanvasContext('bgCav')
      bgCav.setFillStyle('#fff') // 填充样式
      bgCav.setStrokeStyle('#eee') // 画笔颜色
      bgCav.setLineWidth(8) // 画笔粗细px
      bgCav.arc(startX, startY, radius, 0, 2 * Math.PI) // 圆
      bgCav.fill() // 执行填充
      bgCav.stroke() // 执行画出当前路径的边框
      bgCav.draw() // 绘制
    },
    // 前置画布
    drawFrontCav(result) {
      const { level, ratio } = result
      let index = 0
      if(level === '优良') {
        index = 0
      } else if(level === '良好') {
        index = 1
      } else {
        index = 2
      }
      // 处理数据
      const color = colorArr[index]
      const angle = 2 * parseInt(ratio) / 100 - 0.5 // ratio格式是100%，故需要转换
      // 前置的canvas
      var cirCav = wx.createCanvasContext('frontCav') // 顶部
      cirCav.setStrokeStyle(color) // 画笔颜色
      cirCav.setLineWidth(10) // 画笔粗细
      cirCav.setLineCap('round') // 画笔圆角
      cirCav.arc(startX, startY, radius, -0.5 * Math.PI, angle * Math.PI) // 从-π/2开始，即12点钟方向
      cirCav.setFontSize(26) // 先设置字号
      cirCav.setFillStyle(color) // 填充颜色
      cirCav.fillText(level, textX, textY) // 再设置文字

      cirCav.stroke() // 画出当前路径的边框
      cirCav.draw() // 绘制
    },
    // 获取系统信息
    getSysInfo(callback) {
      wx.getSystemInfo({ success: res => {
        this.cavWidth = res.windowWidth / 2 // canvas宽高=屏幕宽的一半
        callback && callback()
      }})
    },
  }
}
</script>
<style lang="scss" scoped>
.wrap {
  position: relative;
  background-color: #f8f8f8;
  .circle {
    position: absolute;
    border: 1rpx solid #159;
  }
}
</style>
